<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="../js/vue2.6.12.js"></script>
    <style>
        .ul{
            /*display: -webkit-flex;*/
            /*display: flex;*/
        }
        .li{
            display: flex;
            display: -webkit-flex;
            border: solid 1px #ccc;
            border-radius: 3px;
            justify-content: space-around;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 15px;
        }
        .li > div{
            display: inline-flex;
        }
        .image{
            width: 100px;
            height: 100px;
        }
        .image > img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="lists.length<1">暂无订单</div>
        <div v-else>
            <ul class="ul">
                <div><input type="checkbox" v-model="allCheck" @change="Acheck()" style="margin-left: 3%;">全选/全不选</div>
                <li class="li" v-for="(item,index) in lists" :key="index">
                    <div><input type="checkbox" v-model="checkGroup" :value="item" ></div>
                    <div>
                        名称：{{item.id}}--->{{item.name}}
                    </div>
                    <div class="image">
                        <img :src="item.pic" alt="">
                    </div>
                    <div >
                        单价：{{item.price}}/元
                    </div>

                    <div>
                        <button @click="item.num--" :disabled="item.num===1">-</button>
                        {{item.num}}
                        <button @click="item.num++" :disabled="item.num===item.allNum">+</button>
                    </div>
                    <div>
                        <button @click="del(index,item.id)">删除</button>
                    </div>
                </li>
            </ul>
            <div style="margin-right: 2%;text-align: right;" >总计：{{ sum() }} 元</div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            allCheck:false,
            checkGroup:[],
            lists:[
                {
                    id:1,
                    name:'小学书籍',
                    price:20,
                    num:1,
                    allNum:200,
                    pic:"../images/5.jpg",
                },
                {
                    id:2,
                    name:'初中书籍',
                    num:1,
                    allNum:300,
                    price: 30,
                    pic:"../images/5.jpg",
                },
                {
                    id:3,
                    name:'高中书籍',
                    price:40,
                    num:1,
                    allNum:400,
                    pic:"../images/5.jpg",
                },
                {
                    id:4,
                    name:'大学书籍',
                    price:50,
                    num:1,
                    allNum:500,
                    pic:"../images/5.jpg",
                },
            ],
        },
        methods:{
            sum(){
                let total=0;
                this.checkGroup.forEach((item,index)=>{
                    total+=item.price * item.num
                });
                return total;
            },
            del(index,delid){
                //清除 checkGroup中的数据
                this.checkGroup=this.checkGroup.filter(item=>item.id!==delid);
                //清除 lists 中的数据
                this.lists.splice(index,1);
            },
            Acheck(){
                if(this.allCheck){
                    this.checkGroup=this.lists;
                }else {
                    this.checkGroup=[];
                }
            }
        }
    });
</script>
</html>